import styled from 'styled-components'
import border from '@a/styled/border.js'

const CourseBox = styled.div`
    display:flex;
    flex-direction:column;
    height:100%;
`

const CourerDiv = styled.div`
    
    height:100%;
    flex:1;
    overflow-y:scroll;
    .listBox{
        background:#fff;
        padding:0.18rem 0.09rem 0.16rem;
    }
    ul{
        
        li{
            padding-left:0.09rem;
            height:0.72rem;
            margin-bottom:0.16rem;
            display:flex;
            div:first-child{
                width:1.3rem;
                height:0.72rem;
                border:1px solid #373535;
                border-radius:0.08rem;
                overflow:hidden;
                img{
                    width:100%;
                    height:100%;
                }
            }
            div:last-child{
                height:0.72rem;
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                margin-left:0.16rem;
                h2{
                    font-weight:normal;
                    font-size:0.18rem;
                }
                p{
                    color:#000;
                    font-size:0.16rem;
                    i{
                        margin-left:0.12rem;
                    }
                }
            }
        }
    }
`

const BordDiv = border(styled.div`
    width:1.3rem;
    height:0.72rem;
    border:1px solid #373535;
    border-radius:0.08rem;
    overflow:hidden;
    img{
        width:100%;
        height:100%;
    }
`)

export {
    CourerDiv,
    BordDiv,
    CourseBox
} 